<template>
  <div class="TodoItem">
    <label>
      <input
        type="checkbox"
        :checked="item.done"
        @change="changeDone(item.id)"
      />
      {{ item.title }}
      <button @click="del(item.id)">删除</button>
    </label>
  </div>
</template>

<script>
export default {
  name: "TodoItem",
  props: ["item", "changeChecked", "delToDo"],
  methods: {
    //改变选择的事件的状态
    changeDone(id) {
      this.changeChecked(id);
    },
    //删除选择状态
    del(id) {
      this.delToDo(id);
    },
  },
};
</script>

<style lang="less" scoped>
.TodoItem {
  border: 1px solid #cccccc;
  height: 30px;
  line-height: 25px;
  input {
    vertical-align: middle;
    cursor: pointer;
  }
  button {
    height: 20px;
    background-color: #d65044;
    border: 1px solid #cccccc;
    padding: 0px 5px;
    border-radius: 3px;
    color: #e2e2e2;
    float: right;
    margin: 5px;
    display: none;
    cursor: pointer;
  }
  &:hover button {
    display: block;
  }
}
</style>